<template>
    <div class="selec-option">
        <div class="options">
            <a 
            v-for="item in optionKeyArr"
            :key="option[item].id"
            :class="selectOptionActive === option[item].id ? 'active' : ''"
            @click="setSelctOption(option[item].id)"
            class="option-btn">
            {{option[item].name}}
            </a>
            <div class="line" :style="{left: `${lineTopLeft * 50}%`}"></div>
        </div>
        <div class="content">
            <van-row gutter="10" v-show="selectOptionActive === 'normal'" class="normal-content">
                <van-col 
                v-for="(item, index) in writedOtpion"
                :key="item.key"
                @click="setIsShow(item.key, index)"
                span="6"
                >
                    <a class="normal-btn" :class="item.isShow ? 'active' : ''">{{item.name}}</a>
                </van-col>
            </van-row>
            <div v-show="selectOptionActive === 'custom'" class="custom-content">
                <a 
                class="custom-option"
                v-for="(item, index) in option.custom.list.length > 0 ? option.custom.list : ['', '', '']"
                :key="index"
                >
                    <span class="index">{{index + 1}} : </span>
                    <van-field :placeholder="placeholder" @input="chengText" v-model="inputText[index]" :maxlength="16" class="input" />
                </a>
                <div class="custom-option explain">内容可自定义，每行最多10字。<a @click="showDefaultText">显示默认内容</a></div>
            </div>
        </div>
    </div>
</template>

<script>

import Vue from 'vue'
import { Col, Row, Field } from 'vant'

Vue.use(Col)
Vue.use(Row)
Vue.use(Field)

export default {
    name: 'SelecOption',
    props: {
        selectOption: {
            type: Object,
            default: {}
        },
        selectOptionActive: {
            type: String,
            default: ''
        },
        userInfoData: {
            type: Object,
            default: {}
        },
        optionWriteList: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            inputText: {
                0: '',
                1: '',
                2: '',
            },
            placeholder: '最多16个字',
        }
    },
    methods: {
        // 显示默认内容
        showDefaultText() {
            this.$emit('showDefaultText')
        },
        setSelctOption(id) {
            this.$emit('setSelctOption', id)
        },
        setIsShow(key, index) {
            this.$emit('setIsShow', {key, index})
        },
        setCustomText() {
            const customList = this.option.custom.list
            if (customList.length > 0) {
                const that = this
                customList.forEach((item, index) => {
                    // console.log('item', item)
                    that.inputText[index] = item
                })
            } else {
                const that = this
                setTimeout(() => {
                    that.setCustomText()
                }, 10)
            }
        },
        chengText(data){
            // console.log('this.inputText', this.inputText)
            this.$emit('changeCustomText', this.inputText)
        }
    },
    computed: {
        option() {
            // console.log('this.selectOption', this.selectOption)
            return {...this.selectOption}
        },
        optionKeyArr() {
            return Object.keys(this.selectOption)
        },
        lineTopLeft() {
            return this.optionKeyArr.indexOf(this.selectOptionActive)
        },
        userInfo() {
            return this.userInfoData
        },
        writedOtpion() {
            return [...this.optionWriteList]
        }
    },
    mounted() {
        this.setCustomText()
    },
    watch: {
        selectOption: {
            deep: true,
            handler() {
                this.setCustomText()
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.custom-content {
    padding: 0 15px;
    background: #f3f3f3;

    .custom-option {
        height: 40px;
        display: flex;
        align-items: center;
        background: #f3f3f3;
        border-bottom: 1px solid #dadada;
        width: 100%;
        overflow: hidden;

        .index {
            font-weight: bold;
            color: #333333;
            flex-shrink: 0;
            margin-right: 3px;
        }
    }

    .explain {
        color:red;
        font-size: 12px;
    }

    .input {
        height: 100%;
        background: #f3f3f3;
        padding: 0;
        line-height: 40px;
    }
}

.normal-content {
    background: #f3f3f3;
    padding: 0px 10px 15px 10px;
    margin: 0 !important;

    .normal-btn {
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #0077bf;
        border-radius: 18px;
        border: 1px solid #0077bf;
        margin-top: 15px;
    }

    .active {
        border: none;
        color: white;
        background: #0077bf;
    }
}

.options {
    height: 40px;
    display: flex;
    width: 100%;
    position: relative;

    .option-btn {
        height: 100%;
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999999;
    }

    .active {
        color: #0077bf;
        font-weight: bold;
    }

    .line {
        height: 2px;
        width: 50%;
        position: absolute;
        left: 0;
        bottom: 0px;
        background: #0077bf;
        transition: left .4s;
    }
}
</style>